<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData(true)"
      @reset="initData(true)"
    >
      <template #plus-field-warehouseId>
        <chooseWarehouse v-model="queryform.warehouseId" /> </template
    ></PlusSearch>
    <div class="mb-3">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>

    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      row-key="userId"
      @page-size-change="initData"
      @page-current-change="initData(false)"
    >
      <template #action="{ row }">
        <div v-if="row.roleKey == 'admin'">
          <el-button link @click="handleReset(row)">密码变更</el-button>
          <el-button type="primary" link @click="handleSetting(row)"
            >设置</el-button
          >
          <el-button
            v-if="row.status == 0"
            type="warning"
            link
            @click="handleFreeze(row, 1, '冻结')"
            >冻结</el-button
          >
          <el-button
            v-else-if="row.status == 1"
            type="success"
            link
            @click="handleFreeze(row, 0, '解冻')"
            >解冻</el-button
          >
          <el-button
            v-if="row.status == 2"
            type="success"
            link
            @click="handleFreeze(row, 0, '取消注销')"
            >取消注销</el-button
          >
          <el-button
            v-else
            type="danger"
            link
            @click="handleFreeze(row, 2, '注销')"
            >注销</el-button
          >
        </div>
      </template>
    </PureTable>
    <operate ref="operateRef" @confirm="initData()" />
    <resetPassword ref="resetPasswordRef" />
    <setting ref="settingRef" @confirm="initData(false)" />
  </main-box>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { ElMessageBox, ElMessage } from "element-plus";
import { type PlusColumn, PlusSearch } from "plus-pro-components";

import chooseWarehouse from "@/components/choose-warehouse/index.vue";

import operate from "./modules/operate.vue";
import resetPassword from "./modules/resetPassword.vue";
import setting from "./modules/setting.vue";
import { getUserList, statusApi } from "@/api/system/user";

/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: { placeholder: "账号/用户名/角色" }
  },
  {
    label: "工具室",
    prop: "warehouseId"
  }
];
const queryform = ref({} as any);

/* 表格数据 */
const tableRef = ref<any>();
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  // { type: "selection" },
  { label: "账号", prop: "userName" },
  { label: "用户名称", prop: "nickName" },
  {
    label: "角色",
    prop: "roleName"
  },
  {
    label: "组织",
    prop: "depts",
    formatter: ({ depts }) => {
      if (depts) {
        const arr = depts.map(item => item.deptName);
        return arr.join(", ");
      }
      return "";
    }
  },
  {
    label: "工具室",
    prop: "warehouseName"
  },
  {
    label: "账号状态",
    prop: "status",
    cellRenderer: ({ row }) => {
      if (row.status == null || row.status == undefined) {
        return row.status;
      }
      const statusObj = {
        "0": { type: "primary", text: "正常" },
        "1": { type: "warning", text: "冻结" },
        "2": { type: "danger", text: "注销" }
      };

      const obj = statusObj[String(row.status)];
      return <el-tag type={obj.type}>{obj.text}</el-tag>;
    }
  },
  { label: "添加时间", prop: "createTime" },
  { label: "操作", prop: "action", fixed: "right", slot: "action" }
];

const initData = (needInit = true) => {
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    ...queryform.value,
    pageSize: pagination.pageSize,
    pageNum: pagination.currentPage
  };
  getUserList(params).then(({ rows, total }) => {
    tableData.value = rows;
    pagination.total = Number(total);
  });
};
initData();
// 单个
const handleFreeze = (row, status, title) => {
  ElMessageBox.confirm(`您确定${title}该用户？`, `${title}确认`, {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      statusApi({ userId: row.userId, status }).then(res => {
        ElMessage.success(`${title}成功`);
        initData(false);
      });
    })
    .catch(() => {});
};

// 新增
const operateRef = ref<any>();
const handleAdd = () => {
  operateRef.value.show();
};

// 更改密码
const resetPasswordRef = ref<any>();
const handleReset = row => {
  resetPasswordRef.value.show(row);
};

// 设置用户
const settingRef = ref(null);
const handleSetting = row => settingRef.value.show(row);
</script>
